<template>
  <div>
    <el-row>
      <el-col :span="12">
        <el-button type="primary" plain @click="handleClickAddNewTask">添加任务<i class="el-icon-plus el-icon--right"></i></el-button>
      </el-col>
      <el-col :span="12">
        <div style="display:flex;align-items: center;justify-content: flex-end;height:34px">
          <el-radio v-model="radio" label="100">查看全部</el-radio>
          <el-radio v-model="radio" label="0">只看待处理</el-radio>
          <el-radio v-model="radio" label="1">只看已处理</el-radio>
<!--          <el-checkbox-group v-model="checkList">-->
<!--            <el-checkbox label="只看待处理"></el-checkbox>-->
<!--            <el-checkbox label="只看已处理"></el-checkbox>-->
<!--          </el-checkbox-group>-->
        </div>
      </el-col>
    </el-row>
    <div style="height: 13px"/>
    <div class="task-list-wrapper" v-loading="tableLoading">
      <el-card :body-style="{margin:'0px',padding:'14px'}" shadow="always" v-for="item in farmDetailItemArray" :key="item.id" style="margin-bottom:10px">
        <div class="flex-wrap">
          <div class="task-img-wrap">
            <div>{{item.statusLabel}}</div>
            <img :src="item.imgUrl"/>
          </div>
          <div style="margin-left:14px;flex: 1">
            <div class="task-content-header">
              <div class="item-1">{{item.taskName}}</div>
              <div class="item-2">{{item.pointer}}</div>
              <div class="item-3" v-if="(item.money)*1>0">农事总费用:<span style="font-weight: bolder;font-size:22px;color:#f87f0e">{{item.money}}<span style="font-size:14px">元</span></span></div>
            </div>
            <div class="task-content-center">
              <span style="color:#333;font-weight:bold">{{item.area}}</span>亩
            </div>
            <div class="task-content-footer">
              <div>
                {{item.startDate}}&nbsp;至&nbsp;{{item.endDate}}
              </div>
              <div>
                发布时间:&nbsp;{{item.publish}}
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <div class="flex-wrap" style="align-items: center;justify-content: center">
        <page-plugin
          v-show="true"
          :pages="page.pages"
          :total="page.total"
          label="农资"
          :page.sync="page.pageNo"
          :limit.sync="page.pageSize"
          @changePageNum="changePageNum"
        />
      </div>
    </div>
  </div>
</template>
<script>
    import PubSub from 'pubsub-js'
    import {
        FARM_TASK_OPEN_DIALOG,
        FARM_TASK_DETAIL_REFRESH
    } from '@/utils/publishId'
    import pagePlugin from "@/components/page-plugin"
    import {
        queryTaskType,
        queryPlanters,
        queryFarmEvent,
        queryTaskStatusType
    } from "@/api/affairs"

    export default {
        components: {
            'page-plugin': pagePlugin
        },
        data() {
            return {
                tableLoading:false,
                farmTaskPubSub: null,
                page: {
                    pages: 1,
                    total: 0,
                    pageNum: 1,
                    pageSize: 10
                },
                radio: "100", // 默认查看全部
                yclImg: require("@/assets/img/task/yichuli.png"),
                dclImg: require("@/assets/img/task/daichuli.png"),
                ycqImg: require("@/assets/img/task/yichaoqi.png"),
                statusTypeOptions:[],
                farmTypeOptions:[],
                plantersTypeOptions:[],
                farmDetailItemArray:[]
            }
        },
        watch: {
            radio: {
                handler(n, o){
                    this.page.pageNum = 1
                    this.page.pageSize = 10
                    this.getTaskList()
                }
            }
        },
        created() {
            this.radio = "100"
            this.getAllOptions()
        },
        mounted(){
            this.farmTaskPubSub = PubSub.subscribe(FARM_TASK_DETAIL_REFRESH, (msg, data) => {
                // 添加完成后刷新列表
                this.getTaskList()
            })
        },
        beforeDestroy() {
            PubSub.unsubscribe(this.farmTaskPubSub)
        },
        methods:{
            async getTaskList(){
                const info = JSON.parse(sessionStorage.getItem("massifDetails"))
                const params = {
                    pageSize: this.page.pageSize,
                    pageNum: this.page.pageNum
                }
                if(this.radio=='100'){
                    params['status'] = undefined
                }else{
                    params['status'] = this.radio
                }
                params['landNumber'] = info && info.id ? info.id : -1
                this.tableLoading = true
                const response = await queryFarmEvent(params)
				console.log('农事任务',response);
                const {data,code,msg} = response.data
                this.tableLoading = true
                this.page.pageNum = data.pageNum
                this.page.pageSize = data.pageSize
                this.page.total = data.total
                this.page.pages = data.pages
                if(code==200){
                    this.farmDetailItemArray = []
                    if(data.list && data.list.length>0){
                        let pointer = '未指派'
                        this.farmDetailItemArray = data.list.map(item=>{
                            if(item.execPersonId && item.execPersonId!=''){
                                const pointerObj = this.plantersTypeOptions.find(obj=>obj.planterCode==item.execPersonId)
                                if(pointerObj && pointerObj.planterName){
                                    pointer = pointerObj.planterName +"指派"
                                }else{
                                    pointer = '未匹配'
                                }
                            }
                            let statusLabel ='无匹配'
                            let imgUrl = ''
                            if(item.status=='0'){
                                statusLabel = '待处理'
                                imgUrl = this.dclImg
                            }else if(item.status=='1'){
                                statusLabel = '已处理'
                                imgUrl = this.yclImg
                            }else if(item.status=='2'){
                                statusLabel = '已超期'
                                imgUrl = this.ycqImg
                            }
                            const obj = {
                                id: item.id,
                                statusLabel: statusLabel,
                                status: item.status,
                                money: (item.stockGoodsTotal*1+item.stockMachineryTotal*1)/100, // 分转元
                                area: item.plantArea,
                                startDate: item.startTime,
                                endDate: item.endTime,
                                name: item.landName,
                                pointer: pointer,
                                taskName: item.farmType,
                                publish: item.gmtCreate,
                                imgUrl:imgUrl
                            }
                            return obj
                        })
                        this.tableLoading = false
                    }else{
                        this.tableLoading = false
                    }
                }else{
                    this.$message({type:"error", message: msg})
                }
            },
            async getAllOptions(){
                const responses = await Promise.all([queryTaskType(),queryTaskStatusType(),queryPlanters()])
                if(responses[0].data.code==200&&responses[0].data.data && responses[0].data.data.length>0){
                    this.farmTypeOptions = []
                    responses[0].data.data.forEach(item=>{
                        const obj = {
                            formCode:item.dictValue,
                            formName:item.dictLabel
                        }
                        this.farmTypeOptions.push(obj)
                    })
                }
                if(responses[1].data.code==200&&responses[1].data.data && responses[1].data.data.length>0){
                    this.statusTypeOptions = []
                    responses[1].data.data.forEach(item=>{
                        const obj = {
                            statusCode:item.dictValue,
                            statusName:item.dictLabel
                        }
                        this.statusTypeOptions.push(obj)
                    })
                }
                if(responses[2].data.code==200&&responses[2].data.data && responses[2].data.data.length>0){
                    this.plantersTypeOptions = []
                    responses[2].data.data.forEach(item=>{
                        const obj = {
                            planterCode:item.userId,
                            planterName:item.userName
                        }
                        this.plantersTypeOptions.push(obj)
                    })
                }
                this.getTaskList()
            },
            handleClickAddNewTask() {
                const info = JSON.parse(sessionStorage.getItem("massifDetails"))
                PubSub.publish(FARM_TASK_OPEN_DIALOG, {show: true, type: "detail_add", item: this.farmTypeOptions, massId: info.id})
            },
            changePageNum(val) {
                // console.log("修改页码时触发", val)
                this.page.pageNum = val.page
                this.page.pageSize = val.limit
                this.getTaskList()
            },
            async getTaskType(){
                const response = await queryTaskType()
                if(response.data.code==200&&response.data.data && response.data.data.length>0){
                    this.farmTypeOptions = []
                    response.data.data.forEach(item=>{
                        const obj = {
                            formCode:item.dictValue,
                            formName:item.dictLabel
                        }
                        this.farmTypeOptions.push(obj)
                    })
                }
            },
            async getTaskStatusType(){
                const response = await queryTaskStatusType()
                if(response.data.code==200&&response.data.data && response.data.data.length>0){
                    this.statusTypeOptions = []
                    response.data.data.forEach(item=>{
                        const obj = {
                            statusCode:item.dictValue,
                            statusName:item.dictLabel
                        }
                        this.statusTypeOptions.push(obj)
                    })
                }
            },
            async getPlanters(){
                const response = await queryPlanters()
                if(response.data.code==200&&response.data.data && response.data.data.length>0){
                    this.plantersTypeOptions = []
                    response.data.data.forEach(item=>{
                        const obj = {
                            planterCode:item.userId,
                            planterName:item.userName
                        }
                        this.plantersTypeOptions.push(obj)
                    })
                }
            }
        }
    }
</script>
<style scoped>
  .flex-wrap{
    display: flex;
  }
  .task-img-wrap{
    position: relative;
  }
  .task-img-wrap div{
    position: absolute;
    color: #fff;
    top:10px;
    text-align: center;
    width: 80px;
  }
  .task-img-wrap img{
    width: 80px;
    height: 80px;
  }
  .task-content-header{
    display: flex;
    width: 100%;
  }
  .task-content-header .item-1{
    font-size: 20px;
    width: 130px;
    font-weight: bolder;
  }
  .task-content-header .item-2{
    padding: 4px 10px;
    border: 1px solid #11C26D;
    border-radius: 4px;
    color: #11C26D;
  }
  .task-content-header .item-3{
    flex: 1;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
  }
  .task-content-center{
    height: 36px;
    line-height: 36px;
  }
  .task-content-footer{
    display: flex;
    flex: 1;
    width:100%;
  }
  .task-content-footer div:last-child{
    flex: 1;
    text-align: right;
  }
</style>
